<template>
  <div>
    <div id="container"></div>
    <div ref="infoData" class="custom-info input-card content-window-card">
      <div class="info-top">
        <div>
          <span>{{ devInfo.title }}</span>
          <span style="font-size: 11px; margin-left: 20px; color: #f00">
            房源：{{ devInfo.state }}万套
          </span>
        </div>
        <img
          @click="closeInfoWindow"
          src="https://webapi.amap.com/images/close2.gif"
        />
      </div>
      <div class="info-middle" style="background-color: white">
        <img class="info-img" :src="devInfo.i" />
        <router-link to="/list" class="info-a-title">{{
          devInfo.name
        }}</router-link>
        <br />地址：{{ devInfo.address }}<br />
        <div class="info-div">大小：{{ devInfo.home }}</div>
        <span class="info-span">
          维护：{{ devInfo.day }}<br />
          <div class="info-div">价格：{{ devInfo.price }}元/月</div>
          <span class="info-span"> 朝向: {{ devInfo.direction }}</span
          ><br />
          <div class="info-div">面积：{{ devInfo.area }}m²</div>
        </span>
      </div>
      <div
        class="info-bottom"
        style="position: relative; top: 0px; margin: 0px auto"
      >
        <img src="https://webapi.amap.com/images/sharp.png" />
      </div>
    </div>
    <!-- <div class="info">
      点击地图上的点标记，打开所添加的自定义信息窗体
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      devInfo: {
        title: "",
        icon: "",
        state: "",
        address: "",
        home: "",
        day: "",
        price: "",
        direction: "",
        area: "",
        name: "",
        i: "",
        data: null,
      },
      map: null,
      markerData: [
        {
          title: "雁塔区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "666",
          name: "整租·广电小区",
          address: "雁塔-城南-广电小区",
          home: "2室1厅1卫",
          day: "今天维护",
          price: "2100",
          direction: "南",
          area: "57",
          i: "/list_11.jpg",
          position: [108.95, 34.22],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: "西咸新区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "521",
          name: "整租·紫薇·万科大都会",
          address: "西咸新区（西安）-西咸-紫薇·万科大都会",
          home: "3室2厅2卫",
          day: "2天前维护",
          price: "3000",
          direction: "南 北",
          area: "98",
          i: "/list_25.jpg",
          position: [108.78, 34.33],
          offset: new AMap.Pixel(-10, -30),
        },
        {
          title: "碑林区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "1314",
          name: "合租·兴庆小区永嘉坊",
          address: "碑林-城东-兴庆小区永嘉坊",
          home: "5室0厅1卫",
          day: "7天前维护",
          price: "700",
          direction: "南",
          area: "98",
          i: "/list_3.jpg",
          position: [108.94, 34.26],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: "未央区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "999",
          name: "合租·汉都新苑A区",
          address: "未央-草滩-汉都新苑A区",
          home: "5室0厅1卫",
          day: "7天前维护",
          price: "600",
          direction: "北",
          area: "68",
          i: "/list_8.jpg",
          position: [108.95, 34.29],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: "灞桥区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "750",
          name: "整租·金霖小区",
          address: "灞桥-浐河西路-金霖小区",
          home: "2室2厅2卫",
          day: "7天前维护",
          price: "2200",
          direction: "南",
          area: "151",
          i: "/list_8.jpg",
          position: [109.06, 34.27],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: "临潼区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "350",
          name: "整租·隆基泰和柏悦山",
          address: "临潼-临潼-隆基泰和柏悦山",
          home: "3室2厅",
          day: "4天前维护",
          price: "1500",
          direction: "南/北",
          area: "95.00",
          i: "/list_17.jpg",
          position: [109.21,34.37],
          offset: new AMap.Pixel(-3, -30),
        },
        {
          title: "长安区",
          icon: "/lsm_gaode.png", //点标记图片路径
          state: "222",
          name: "整租·海棠别馆",
          address: "长安-紫薇田园都市-海棠别馆",
          home: "2室1厅",
          day: "3天前维护",
          price: "2600",
          direction: "东/北",
          area: "76.00",
          i: "/list_15.jpg",
          position: [108.91,34.16],
          offset: new AMap.Pixel(-3, -30),
        },
      ],
    }
  },
  mounted() {
    this.map = this.createMap()
    this.map.clearMap()
    this.addMarker()
  },
  created() {},
  methods: {
    createMap() {
      //1.地图初始化时，在地图上添加marker标记,鼠标点击marker可弹出自定义的信息窗体
      var mapData = new AMap.Map("container", {
        viewMode: "3D", //是否为3D地图模式
        resizeEnable: true,
        center: [108.96, 34.28], //地图中心点位置
        zoom: 11.7,
      })
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation",
        ],
        function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          mapData.addControl(new AMap.ToolBar())
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          mapData.addControl(new AMap.Scale())
          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          mapData.addControl(new AMap.OverView({ isOpen: true }))
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          mapData.addControl(new AMap.MapType())

        }
      )
      return mapData
    },
    //2.添加点标记
    addMarker() {
      const self = this
      let arr = []
      this.markerData.forEach((item) => {
        let marker = new AMap.Marker({
          icon: item.icon, //点标记图片路径
          position: item.position, //位置
          offset: item.offset, //偏移
        })
        arr.push(
          Object.assign(item, {
            mapId: marker._amap_id,
          })
        )
        marker.setMap(self.map)
        AMap.event.addListener(marker, "click", (e) => {
          self.markerClick(arr, marker)
        })
      })
    },
    //3.点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体
    markerClick(arr, marker) {
      let arrNew = arr.filter((x) => x.mapId == marker._amap_id)
      this.devInfo = arrNew && arrNew[0]
      let infoWindow = this.createInfoWindow()
      this.openInfoWindow(infoWindow, marker)
    },
    //4.构建自定义窗体
    createInfoWindow() {
      let infoWindowData = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: this.$refs.infoData,
        // content: this.getContent(),
        offset: new AMap.Pixel(16, -45),
      })
      return infoWindowData
    },

    //5.打开窗体
    openInfoWindow(infoWindow, marker) {
      infoWindow.open(this.map, marker.getPosition())
    },
    //6.关闭窗体
    closeInfoWindow() {
      this.map.clearInfoWindow()
    },
  },
}
</script>

<style scoped>
html,
body,
#container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  /* width: auto; */
  width: 28rem;
  padding: 0;
}
.content-window-card p {
  height: 2rem;
}
.custom-info {
  border: solid 1px silver;
}
div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}
div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}
div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}
div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}
div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}
div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}
div.info-bottom img {
  position: relative;
  z-index: 104;
  left: 10%;
}
/* span {
  margin-left: 5px;
  font-size: 11px;
} */
.info-middle img {
  width: 60px;
  float: left;
  margin: 0 10px;
}
.info-span {
  /* margin-left: 35px; */
  font-size: 11px;
}
.info-div {
  width: 140px;
  display: inline-block;
  margin-left: 10px;
}
.info-img {
  width: 40px;
  height: 40px;
}
.info-a-title {
  /* color: #000000; */
  font-size: 16px;
}
#container .amap-icon img,
.amap-marker-content img {
  width: 64px;
  height: 64px;
}
</style>
